<template>
    <div class="container">
        <headNav title="会员服务"></headNav>

        <div class="info-p">
            <div class="info-detail">
                <img :src="headImg" class="headImg">
                <div class="name-info">
                    <div class="name-name">{{studentName}}</div>
                    <div class="class-name">{{schoolName}}，{{gradeName}}{{className}}</div>
                </div>
                <div @click="toOrderList" class="ktjl">
                    开通记录
                    <img src="@/assets/img/vip/arr.png" class="arr-r" alt="">
                </div>
            </div>
        </div>

        <div class="tc-list">
            <template v-for="(item, index) in headData" >
                <div  :class="{'blue-p': (index % 2) == 0,'red-p': (index % 2) == 1 }">
                    <!-- <div class="tc-name">{{item.Name}}发送到阿斯顿发送到手动阀沙发撒地方</div> -->

                    <div class="tc-name">
                        <workingText :content="item.Name"
                        :time="20"
                        color="#fff" font-size="0.3rem"></workingText>
                    </div>

                    <div class="tc-date">有效期至{{item.ExpirationTime}}</div>
                </div>
            </template>

            <!-- <div class="red-p">
                <div class="tc-name">增值流量包黄金组合</div>
                <div class="tc-date">有效期至2021.3.18</div>
            </div> -->
        </div>

        <div class="flow-p">
            本月剩余通话时长
            <div class="flow-m">{{flowData.minuteSum}}</div>
            分钟
            <div class="flow-f">不限流量</div>
        </div>

            <!-- <div>{{headData}}</div>
            <div>{{flowData}}</div>
            <div>{{sectionData}}</div> -->

        <div class="vip-list" v-if="sectionData.length > 0">
            <div class="vip-item" v-for="(item,index) in sectionData" :key="index">
               <img v-if="item.charge.OrderType == 1" src="@/assets/img/vip/dem.png" class="vip-img">
               <img v-else src="@/assets/img/vip/glod.png" class="vip-img">

               <div class="vip-title">{{item.charge.Name}}</div>
               <div @click="goDetail(item)" class="vip-detail">
                   套餐详情
                   <img src="@/assets/img/vip/arr-g.png" class="arr-img">
                </div>

                <div v-if="item.charge.OrderType == 1" class="model-list">

                    <div @click="buy(item, m)" v-for="(m,n) in item.packages" :key="n" class="model-item-1"
                        :class="{'model-item-three': (n + 1) % 3 == 0 }">
                        <div class="model-month">{{m.Month}}个月</div>
                        <div class="mode-money">￥{{m.Amount}}</div>
                        <del class="primary" v-if="m.PackageId == '2142da2625dc4ac287eab634dfe31395'" >￥360</del>
                        <div class="discount" v-if="m.PackageId == '2142da2625dc4ac287eab634dfe31395'" >6.6折</div>
                    </div>

                </div>

                <div v-else class="model-list">
                    <div @click="buy(item, m)" v-for="(m,n) in item.packages" :key="n" class="model-item-2"
                        :class="{'model-item-three': (n + 1) % 3 == 0 }">
                        <div class="model-month">{{m.ThePhone}}分钟通话</div>
                        <div class="mode-money-1">￥{{m.Money}}</div>
                        <div class="primary" v-if="m.PackageId == '2142da2625dc4ac287eab634dfe31395'" >￥360</div>
                        <div class="discount" v-if="m.PackageId == '2142da2625dc4ac287eab634dfe31395'" >6.6折</div>
                    </div>
                </div>


            </div>



        </div>

        <orderDetail ref="orderDetail"></orderDetail>
        <xieyi ref="xieyi"></xieyi>
        <bottomNav :index="2"></bottomNav>
    </div>
</template>
<script>
import bottomNav from '@/components/bottomNav/bottomNav';
import headNav from '@/components/headNav/headNav';
import orderDetail from './orderDetail'
import xieyi from './xieyi'
import workingText from '@/components/workingText'
export default {
    components: {
      bottomNav, headNav, orderDetail, xieyi,workingText
    },
    computed: {
        headImg () {
            let h = ''

            let childList = this.$store.state.user.childList
            for (let child of childList) {
                if (child.SelfId == this.studentId) {
                    h = child.Img
                }
            }

            if (h) {
                return h
            } else {
                return require('@/assets/img/default_heads.png')
            }
        },
        schoolId () {
            return this.$store.state.user.schoolId
        },
        studentId () {
            return this.$store.state.user.studentId
        },
        studentName () {
            return this.$store.state.user.studentName
        },
        schoolName () {
            return this.$store.state.user.schoolName
        },
        gradeName () {
            return this.$store.state.user.gradeName
        },
        className () {
            return this.$store.state.user.className
        }
    },
    data () {
        return {
            headData: '',
            flowData: '',
            sectionData: [

            ]
        }
    },
    methods: {
         getOrderMaturityTime () {
            var params = {
                StudentId: this.studentId
            }
            this.$store.dispatch('menu/GetOrderMaturityTime', params).then(res => {
                var result = JSON.parse(res)
                // console.log(result)
                if (result.Code == 200) {
                    this.headData = result.Data
                }
            })
        },
        getResidualFlowAndResidualMinute () {
            var params = {
                studentId: this.studentId
            }
            this.$store.dispatch('vip/GetResidualFlowAndResidualMinute', params).then(res => {
                var result = JSON.parse(res)
                if (result.Code == 200) {
                    this.flowData = result.Data
                }
            })
        },
        getChargeAndPackage () {

            var params = {
                type: 1,
                schoolId: this.schoolId
            }
            this.$vux.loading.show({
                text: '加载中..'
            })
            this.$store.dispatch('menu/GetChargeAndPackage', params).then((res) => {
                this.$vux.loading.hide()
                var result = JSON.parse(res)
                console.log('--------这里这里--------------->>>>>', result.Data)
                if(result.Code == 200){
                    this.sectionData = result.Data
                }
            })

        },
        toOrderList () {
			this.$router.push("orderList")
        },
        goDetail (item) {
            this.$store.state.vip.orderDetail = item.charge.Message
            // this.$router.push('orderDetail')
            this.$refs.orderDetail.open()
        },
        buy (charge, packages) {
            this.$refs.xieyi.open()
            this.$store.commit('vip/setCharge', charge)
            this.$store.commit('vip/setPackages', packages)
        }
    },
    mounted () {
        this.getOrderMaturityTime()
        this.getResidualFlowAndResidualMinute()
        this.getChargeAndPackage()
    }
}
</script>
<style scoped>
.container{
    background:#fff;
}
.info-p{
    height: 1.3rem; background: url(../../assets/img/bo.png); background-size: 100% 100%;
    margin: 0 0 0.78rem 0;
}
.info-detail{
    width: 6.64rem; height: 1.8rem; background:#fff; margin: 0 auto; border-radius: 0.15rem;
    box-sizing: border-box; padding: 0.3rem 0.28rem; position: relative;
    box-shadow: 0 0.01rem 0.15rem 0rem rgba(0,0,0,0.3);

}
.headImg{
    width: 1.18rem; height: 1.18rem; border-radius: 50%; object-fit: cover;
    display: inline-block;vertical-align: middle;
}
.name-info{
    display: inline-block;vertical-align: middle;
    padding: 0 0 0 0.24rem; width: 3rem;
}
.name-name{
    font-size: 0.32rem; color: #000; font-weight: bold;
}
.class-name{
    font-size: 0.24rem; color: #666; padding: 0.3rem 0 0 0;
}
.ktjl{
    font-size: 0.26rem; color: #666;
    position: absolute; top: 0.3rem; right: 0.28rem;
}
.arr-r{
    display: inline-block; vertical-align: middle; margin: 0 0 0 0.1rem;
    width: 0.11rem; height: 0.18rem;
}
.tc-list{
    padding: 0 0.3rem;
    overflow-x: scroll;white-space: nowrap;
}
.blue-p{
    display: inline-block; vertical-align: middle;
    width: 3.42rem; height: 1.8rem;
    background: url(../../assets/img/vip/blue-bg.png); background-size: 100% 100%;
}
.red-p{
    display: inline-block; vertical-align: middle;
    width: 3.42rem; height: 1.8rem;
    background: url(../../assets/img/vip/red-bg.png); background-size: 100% 100%;
}
.tc-name{
    font-size: 0.3rem; color: #fff; font-weight: bold;
    padding: 0.3rem 0 0 0.32rem; text-align: left;
}
.tc-date{
    font-size: 0.24rem; color: #fff;
    padding: 0.17rem 0 0 0.32rem; text-align: left;
}
.flow-p{
    color: #1B1F27; font-size: 0.26rem;
    padding: 0.2rem 0.3rem;
}
.flow-m{
    display: inline-block; vertical-align: bottom;font-size: 0.4rem; color:  #128FEF;
    font-style: italic;
}
.flow-f{
    color: #128FEF;
    display: inline-block; vertical-align: bottom;
}
.vip-list{

}
.vip-item{
    width: 6.64rem;  background:#fff; border-radius: 0.1rem;
    margin: 0.28rem auto; padding: 0.3rem 0.25rem;
    box-sizing: border-box; box-shadow: 0 0 0.1rem 0 rgba(0,0,0,0.3);
}
.vip-img{
    display: inline-block; vertical-align: middle; width: 0.50rem; height: 0.42rem;
}

.vip-title{
    display: inline-block; vertical-align: middle;width: 4rem;
    padding: 0 0 0 0.15rem;
    color: #1B1F27; font-size: 0.3rem; font-weight: bold;
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

.vip-detail{
    font-size: 0.26rem;
    color: #999; display: inline-block; vertical-align: middle;
}
.arr-img{
    color: #999; display: inline-block; vertical-align: middle;
    width:0.1rem; height: 0.17rem;
}
.model-list{
    padding: 0.4rem 0 0 0;

}
.model-item-1{
    width: 1.86rem; height: 1.26rem; text-align: center;
    background: url(../../assets/img/vip/model-1.png);
    background-size: 100% 100%;
    display: inline-block; vertical-align: middle;
    margin: 0 0.25rem 0.25rem 0;
    position: relative;
}
.model-item-three {margin: 0 0rem 0.25rem 0;}
.model-item-2{
    width: 1.86rem; height: 1.26rem;text-align: center;
    background: url(../../assets/img/vip/model-2.png);
    background-size: 100% 100%;
    display: inline-block; vertical-align: middle;
    margin: 0 0.25rem 0.25rem 0;
    position: relative;
}

.model-month{
    color: #333333; font-size: 0.24rem;
    padding: 0.15rem 0 0 0;
}
.mode-money{
    color: #128FEF; font-size: 0.32rem;
    /* padding: 0.1rem 0 0 0 */; font-weight: 600;
}
.mode-money-1{
    color: #FF5033; font-size: 0.32rem;
    /* padding: 0.1rem 0 0 0; */  font-weight: 600;
}
.primary {
  font-size: 0.2rem;
  color: #AAA;
}
.discount {
  width: 0.68rem;
  height: 0.28rem;
  background: #FF9900;
  color: #fff;
  border-radius: 14px 14px 14px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -5px;
  top: -7px;
}
</style>
